<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap">
    <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
    <!-- <el-form-item label="部门编码：">
      <el-input v-model="searchFilters.deptId" placeholder="请输入部门编码"></el-input>
     </el-form-item>
     <el-form-item label="外部平台编码">
      <el-input v-model="searchFilters.outPlatformKey" placeholder="请输入"></el-input>
     </el-form-item>-->
    <!-- <el-form-item label="部门编码：">
      <el-input v-model="searchFilters.bdCode" placeholder="请输入部门编码"></el-input>
     </el-form-item>-->
     <el-form-item label="部门名称：" prop="bdName">
       <el-select clearable placeholder="选择部门" v-model="searchFilters.bdName">
         <el-option v-for="(item,index) in deptList" :key="index" :label="item.name"
                    :value="item.id"></el-option>
       </el-select>
     </el-form-item>
    <!-- <el-form-item label="平台编码：">
      <el-input v-model="searchFilters.plaformCode" placeholder="请输入平台编码"></el-input>
     </el-form-item>-->
     <el-form-item label="平台名称：" prop="plaformName" >
      <!--<el-input v-model="searchFilters.plaformName" placeholder="请输入平台名称"></el-input>-->
       <el-select clearable placeholder="选择平台" v-model="searchFilters.plaformName">
         <el-option v-for="(item,index) in platformList" :key="index" :label="item.name"
                    :value="item.id"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="状态：">
      <el-input v-model="searchFilters.auditSts" placeholder="请输入状态"></el-input>
     </el-form-item>


      <el-dialog title="审核核实" width="30%" :visible.sync="reviewFormVisible" :close-on-click-modal="false">
        <el-form :model="searchFilters" label-width="100px" ref="searchFilters">
          <el-row class="searchDialog-input">
            <el-form-item label="审核状态：" prop="auditApply">
              <el-select v-model="searchFilters.auditSts" style="width:100%">
                <el-option label="审核通过" value="1">审核通过</el-option>
                <el-option label="审核拒绝" value="2">审核拒绝</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审批原因：" prop="auditReason" width="100%">
              <el-input v-model="searchFilters.auditReason" type="textarea" auto-complete="off"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
          <el-button @click.native="reviewFormVisible = false">{{$t('action.cancel')}}</el-button>
          <el-button type="primary" @click.native="reviewSuccess">{{$t('action.submit')}}</el-button>
        </div>
      </el-dialog>

      <!-- 搜索区域按钮-查询,重置 -->
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="findPage()">查询</el-button>
         <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
         <el-button type="primary" size="small" @click="applyForm()">申请</el-button>
         <el-button type="primary" size="small" @click="auditForm()">审核</el-button>
        </el-button-group>
       </div>
      </div>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
       <jic-table
          :height="350"
          :operationWidth=300
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showDetailOperation=true
          :showEditOperation=true
          :showBatchDelete=false
          :showSelection=true
          :showIndex=false
          :showDeleteOperation=true
          @findPage="findPage"
          @handleDetail="handleDetail"
          @handleDelete="handleDelete"
          @handleEdit="handleEdit"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          @selectionChange="selectionChange"
          ref="jicTable"
        ></jic-table>
      </div>
</el-form>
    </div>
   </div>
</div>
</template>
<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";

//二.数据输出区
export default {
  //===== 注册组件 =====
  components: {
    jicTable
  },

  //===== 数据初始化区=====
  data() {
    return {
      //===== 公共数据初始化 =====
      pageIndex: 0, //当前页数：首页；
      pageSize: 10, //每页记录数：10条记录；
      totalSize: 0, //总记录数：返回数据总条数
      pageRequest: { pageNum: 1, pageSize: 10 }, // 请求数据的参数
      tableList: [], // 表格列表数据
      searchSize: "mini",
      reviewFormVisible: false,
      dialogVisible: false,
      selectionChangeList: [],
      checkedList: [],
      platformList: [],
      deptList: [],

      //=====表格表头数据=====
      tableHeaderList: [
        // { prop: "id", label: "主键", minWidth: 100, formatter: null },
        // { prop: "outPlatformKey", label: "", minWidth: 100, formatter: null },
        {
          prop: "bdCode",
          label: "部门编码",
          minWidth: 100,
          formatter: null
        },
        { prop: "bdName", label: "部门名称", minWidth: 100, formatter: null },
        {
          prop: "plaformCode",
          label: "平台编码",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "plaformName",
          label: "平台名称",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "applyAmount",
          label: "申请积分",
          minWidth: 100,
          formatter: null
        },
        // { prop: "fileUrl", label: "附件url", minWidth: 100, formatter: null },
        { prop: "remark", label: "备注", minWidth: 100, formatter: null },
       /* {
          prop: "deleteFlag",
          label: "是否删除",
          minWidth: 100,
          formatter: null
        },*/
        {
          prop: "auditSts",
          label: "状态",
          minWidth: 100,
          formatter: function (row, column, sts, index) {
            if (sts === 0) {
              return "未启用";
            } else if (sts === 1) {
              return "启用";
            } else if (sts === 2) {
              return "失效";
            }
          }
        }
      ],

      //=====搜索表单对应的数据对象初始化=====
      searchFilters: {
        outPlatformKey: null,
        bdCode: null,
        bdName: null,
        plaformCode: null,
        plaformName: null,
        applyAmount: null,
        amount: null,
        fileUrl: null,
        remark: null,
        auditSts: null
      }
      //dialogVisible: false, //// 是否显示弹窗内容;
      //editDialogVisible1: false,//// 是否可编辑弹窗内容;
      //editLoading: false,////是否显示加载时动画效果;
    };
  },

  //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
  mounted() {
    this.findPage();
    this.getDeptName();
    this.getPlatform();
  },

  //=====Vue.js 方法区=====
  methods: {
    //1.查询按钮：查询列表数据
    findPage(pageNum) {
      // 传过滤器的参数
      let this_ = this;
      if (this_.searchFilters === undefined || this_.searchFilters === null) {
        this_.searchFilters = {};
      }

      this_.searchFilters.pageNum =
        pageNum === null || pageNum === undefined
          ? this.pageRequest.pageNum
          : pageNum;
      this_.searchFilters.pageSize = this.pageRequest.pageSize;
      this.utils.request.findBudgPlatformApplyPage(
        this_.searchFilters,
        function(res) {
          if (res.code === "0000") {
            this_.tableList = res.data.list;
            this_.totalSize = Number(res.data.total);
          } else {
            this_.tableList = [];
            this_.totalSize = 0;
          }
        }
      );
    },

    // 2.重置按钮：无条件查询搜索框条件
    resetForm(formName) {
      this.searchFilters = {};
      this.findPage(null);
    },
    selectionChange(params) {

      this.selectionChangeList = params.selections;

    },
    // 显示审核弹窗
    auditForm: function () {
      if (this.selectionChangeList.length < 1) {
        this.$message({
          message: "必须选中一条数据",
          type: "warning"
        });
        return false;
      }
      console.log(this.selectionChangeList);
      this.reviewFormVisible = true;
      this_.searchFilters = {
        auditSts: '',
        auditReason: '',
      };
      if (this_.$refs["searchFilters"]) {
        this_.$refs["searchFilters"].clearValidate();
      }
      //this.resetForm("reviewForm");
    },
    //审核提交
    reviewSuccess: function () {
      this.$refs.searchFilters.validate(valid => {
        // debugger
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let this_ = this;
            let params = {};
            //debugger
            params = Object.assign(params, this.searchFilters)

            for (let i = 0; i <this.selectionChangeList.length ; i++) {
              params.id = this.selectionChangeList[i].id;
              this.utils.request.saveBudgPlatformApply(params, function (res) {
                if (res.code == "0000") {
                  this_.searchFilters = {};
                  this_.findPage(null);
                  this_.reviewFormVisible = false;
                  this_.$message({
                    message: "操作成功",
                    type: "success"
                  });
                } else {
                  this_.$message({
                    message: "操作失败, " + res.msg,
                    type: "error"
                  });
                }
              });
            }


          });
        }
      });
    },
    // 3.详情按钮对应的方法
    handleDetail(params) {
      this.$router.push({
        path: "/BudgPlatformApplyDetail/",
        query:
          {
            id: params.row.id,
            disabled: true
          }
      });
    },

    // 4.编辑按钮对应的方法
    handleEdit(params) {
      this.$router.push({
        path: "/BudgPlatformApplyDetail/",
        query: { id: params.row.id, disabled: false }
      });
    },

    // 5.跳转到新增记录页面；
    applyForm(params) {
      params = {
        row: {
          id: null
        }
      };
      this.$router.push({
        path: "/BudgPlatformApplyDetail/",
        query: {
          id: params.row.id,
          disabled: false
        }
      });
    },

    // 6.每页记录数发生变化
    handleSizeChange(params) {
      this.pageRequest.pageSize = params.size;
    },

    // 7.请求页数发生变化
    handlePageChange(params) {
      this.pageRequest.pageNum = params.number;
      this.findPage();
    },
    // 8.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    // 9.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    getDeptName() {
      let this_ = this
      //let param = this.dataForm;
      this.utils.request.DepartmentNameInquiry({}, function (res) {
        this_.deptList = res.data
        console.log(this_.deptList)
      });
    },

    getPlatform() {
      let this_ = this
      // let param = this.dataForm;
      this.utils.request.getPlatformName({}, function (res) {
        this_.platformListAll= res.data;
      });
    },

    // 10.删除按钮：删除选中的记录
    handleDelete(data) {
      this.utils.request.deleteBudgPlatformApply({ id: data.row.id }, res => {
        if (res.data) {
          this.$message({ message: "删除成功", type: "success" });
          this.findPage();
        } else {
          this.$message({ message: "删除失败", type: "warning" });
        }
      });
    }
    //==========Vue.js自定义方法区==========
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
